<template>
  <div class="albumBox">
    <div class="albumLeft">
      <Introduce :detail="albumDetail" :musicList="songs" />
      <MusicList :musicList="songs" />
      <Comment
        ref="comment"
        v-if="commentObj"
        :resourcesId="parseInt($route.query.id)"
        :resourcesType="3"
        :commentObj="commentObj"
        @getComment="getComment"
      />
    </div>
    <div class="albumRight">
      <RightDom ref="rightDom" />
      <DownloadApp />
    </div>
  </div>
</template>

<script>
import { albumDetail, albumComment } from "@/api";
import Introduce from "@/views/Album/introduce.vue";
import RightDom from "@/views/Album/rightDom.vue";
import MusicList from "@/views/Album/musicList.vue";
import Comment from "@/components/comment";
import DownloadApp from "@/components/DownloadApp";
export default {
  data() {
    return {
      albumDetail: undefined, //专辑信息
      songs: undefined, //专辑里的音乐
      commentObj: "",
      commentTotal: 0,
    };
  },
  components: {
    Introduce,
    MusicList,
    Comment,
    DownloadApp,
    RightDom,
  },
  created() {
    this.getDetail();
    this.getComment();
  },
  methods: {
    getDetail() {
      albumDetail({ id: this.$route.query.id }).then((res) => {
        this.albumDetail = res.album;
        this.songs = res.songs;
      });
    },
    getComment(pageNum) {
      albumComment({
        id: this.$route.query.id,
        limit: 20,
        offset: ((pageNum || 1) - 1) * 20,
        timestamp: new Date().valueOf(),
      }).then((res) => {
        if (res.code == 200) {
          this.commentObj = res;
          this.commentTotal = res.total;
        }
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.$refs.comment.contnetPage = 1;
    this.getDetail();
    this.getComment();
    this.$refs.rightDom.getData();
  },
};
</script>

<style lang="scss" scoped>
.albumBox {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  display: flex;
  .albumLeft {
    padding: 47px 30px 40px 39px;
    flex: 1;
    border-right: 1px solid #d3d3d3;
    overflow: hidden;
  }
  .albumRight {
    width: 270px;
    padding: 20px 40px 40px 30px;
    box-sizing: border-box;
  }
}
</style>